<template>
  <div class="fix-online-form">
    <div class="table-page-search-wrapper">
      <p-form-model
        layout="inline"
        :model="scanForm"
        :rules="scanFormRules"
        ref="scanFormRules"
      >
        <p-row :gutter="24">
          <p-col :sm="16">
            <p-form-model-item label="SN/PN" prop="snPn">
              <p-input v-model="snPn" @pressEnter="scan" />
            </p-form-model-item>
          </p-col>
          <p-col :sm="8">
            <p-form-model-item label="送修线体" prop="linename">
              <p-input :value="scanForm.linename" read-only />
            </p-form-model-item>
          </p-col>
          <p-col :sm="8">
            <p-form-model-item label="产品编码" prop="mcode">
              <p-input :value="scanForm.mcode" read-only />
            </p-form-model-item>
          </p-col>
          <p-col :sm="8">
            <p-form-model-item label="产品名称" prop="mname">
              <p-input :value="scanForm.mname" read-only />
            </p-form-model-item>
          </p-col>
          <p-col :sm="8">
            <p-form-model-item label="维修数量" prop="repairNumber">
              <p-input :value="scanForm.repairNumber" read-only />
            </p-form-model-item>
          </p-col>
          <p-col :sm="8">
            <p-form-model-item label="生产工单" prop="productionno">
              <p-input :value="scanForm.productionno" read-only />
            </p-form-model-item>
          </p-col>
          <p-col :sm="8">
            <p-form-model-item label="工序工单" prop="processbillno">
              <p-input :value="scanForm.processbillno" read-only />
            </p-form-model-item>
          </p-col>
          <p-col :sm="8">
            <p-form-model-item label="所属班组" prop="classtimename">
              <p-input :value="scanForm.classtimename" read-only />
            </p-form-model-item>
          </p-col>
        </p-row>
      </p-form-model>
      <p-form-model
        layout="inline"
        :model="stationForm"
        :rules="stationFormRules"
        ref="stationFormRules"
      >
        <p-row :gutter="24">
          <p-col :sm="8">
            <p-form-model-item label="工序名称" prop="processTwoCode">
              <p-tree-select
                v-model="stationForm.processTwoCode"
                :tree-data="secondStations"
                :dropdown-style="{ maxHeight: '300px' }"
                tree-node-filter-prop="title"
                show-search
                allow-clear
                tree-default-expand-all
              />
            </p-form-model-item>
          </p-col>
          <p-col :sm="8">
            <p-form-model-item label="工站名称" prop="stationCode">
              <p-tree-select
                v-model="stationForm.stationCode"
                :tree-data="stations"
                :dropdown-style="{ maxHeight: '300px' }"
                tree-node-filter-prop="title"
                show-search
                allow-clear
                tree-default-expand-all
              />
            </p-form-model-item>
          </p-col>
        </p-row>
      </p-form-model>
      <p-form-model
        layout="inline"
        :model="troubleForm"
        :rules="troubleFormRules"
        ref="troubleFormRules"
      >
        <p-row :gutter="24">
          <p-col :sm="8">
            <p-form-model-item label="问题大类" prop="bigFault">
              <p-input v-model="troubleForm.bigFault.badGroupName" read-only/>
            </p-form-model-item>
          </p-col>
          <p-col :sm="8">
            <p-form-model-item label="问题小类" prop="smallFault">
              <p-tree-select
                v-model="troubleForm.smallFault"
                :tree-data="troubles"
                :dropdown-style="{ maxHeight: '200px' }"
                tree-node-filter-prop="title"
                show-search
                allow-clear
                tree-default-expand-all
                @change="changeHandler"
              />
            </p-form-model-item>
          </p-col>
          <p-col :sm="24">
            <p-form-model-item label="问题描述" prop="idea">
              <p-textarea v-model="troubleForm.idea"></p-textarea>
            </p-form-model-item>
          </p-col>
        </p-row>
      </p-form-model>
      <p-form-model
        layout="inline"
        :model="billsForm"
        :rules="billsFormRules"
        ref="billsFormRules"
      >
        <p-row :gutter="24" style="margin-top: 30px">
          <p-col :sm="8">
            <p-form-model-item label="单据单号" prop="receiptNumber">
              <p-input v-model="billsForm.receiptNumber" read-only />
            </p-form-model-item>
          </p-col>
          <p-col :sm="8">
            <p-form-model-item label="送修日期" prop="sendRepairDate">
              <p-input v-model="billsForm.sendRepairDate" read-only />
            </p-form-model-item>
          </p-col>
        </p-row>
      </p-form-model>
    </div>
  </div>
</template>

<script>
import { postAction, getAction, putAction } from "@/api/manage";
import { api } from "@/api/manage";
import { filterObj, timestampToDatetime } from "@/utils/util";
import mesPeProcessApi from "@/api/mesPeProcess";
export default {
  name: "",
  data() {
    return {
      billsForm: {},
      scanForm: {},
      stationForm: {},
      troubleForm: {
        bigFault: {},
      },
      snPn: "",
      troublesTree: [],
      processTree: [],
      replaceFields: {
        children: "defectProjectVoList",
        title: "badGroupName",
        key: "badGroupCode",
        value: "badGroupCode",
      },
      scanFormRules: {
        // snPn: [{ required: true, message: "请扫描条码" }],
        linename: [{ required: true, message: "送修线体" }],
        mcode: [{ required: true, message: "产品编码" }],
        mname: [{ required: true, message: "产品名称" }],
        repairNumber: [{ required: true, message: "维修数量" }],
        productionno: [{ required: true, message: "生产工单" }],
        processbillno: [{ required: true, message: "工序工单" }],
        classtimename: [{ required: true, message: "所属班组" }],
      },
      stationFormRules: {
        processTwoCode: [{ required: true, message: "工序名称" }],
        stationCode: [{ required: true, message: "工站名称" }],
      },
      troubleFormRules: {
        bigFault: [{ required: true, message: "问题大类" }],
        smallFault: [{ required: true, message: "问题小类" }],
        idea: [{ required: true, }],
      },
      billsFormRules: {
        receiptNumber: [{ required: true }],
        sendRepairDate: [{ required: true }],
      },
    };
  },
  computed: {
    troubles() {
      const data = [];
      this.troublesTree.forEach((item) => {
        const children = [];
        item.defectProjectVoList.forEach((child) => {
          children.push({
            title: child.defectProjectName,
            value: child.defectProjectCode,
          });
        });
        data.push({
          disabled: true,
          title: item.badGroupName,
          value: item.badGroupCode,
          children,
        });
      });
      return data;
    },
    stations() {
      const data = [];
      this.processTree.forEach((item) => {
        const children = [];
        item.children.forEach((child) => {
          const items = [];
          child.children.forEach((one) => {
            items.push({
              title: one.processmname,
              value: one.processmcode,
            });
          });

          children.push({
            disabled: true,
            title: child.processmname,
            value: child.processmcode,
            children: items,
          });
        });
        data.push({
          disabled: true,
          title: item.processmname,
          value: item.processmcode,
          children,
        });
      });

      return data;
    },
    secondStations() {
      const data = [];
      this.processTree.forEach((item) => {
        const children = [];
        item.children.forEach((child) => {
          children.push({
            title: child.processmname,
            value: child.processmcode,
          });
        });
        data.push({
          disabled: true,
          title: item.processmname,
          value: item.processmcode,
          children,
        });
      });
      return data;
    },
  },
  created() {
    this.getTrouble();
    this.getStations();
    this.getRuleCodeValue();
  },
  methods: {
    timestampToDatetime,
    reset() {
      this.billsForm = {};
      this.form = {};
      this.troubleForm = {};
      this.stationForm = {};
      this.snPn = "";
    },
    scan() {
      getAction("/mes-manufacture/mfOnlineRepairTask/getInfo", {
        sn: this.snPn,
      }).then((res) => {
        if (res.success) {
          this.scanForm = res.data;
          this.scanForm.repairNumber = 1;
        } else {
          this.$message.error(res.msg);
          this.scanForm = {};
        }
      });
    },
    getTrouble() {
      getAction(
        `/mes-quality/mesQcDefectProjectMaintain/selectByBadGroupType/1`
      ).then((res) => {
        this.troublesTree = res.data || [];
      });
    },
    getStations() {
      mesPeProcessApi.getProcesstree().then((res) => {
        this.processTree = res.data || [];
      });
    },
    changeHandler(value, label) {
      if (!value) {
        this.troubleForm.bigFault = {};
      }
      console.log(value, label, this.troublesTree);
      this.troublesTree.forEach((item) => {
        item.defectProjectVoList.forEach((childs) => {
          if (childs.defectProjectCode === value) {
            this.troubleForm.bigFault = item;
          }
        });
      });
    },
    getRuleCodeValue() {
      let param = {
        rules: [
          { ruleCode: "mes_send_a_single_number", columnName: "filedCode" },
        ],
      };
      putAction(api.ruleBaseURL, param).then((res) => {
        // 执行成功，获取返回的值，并赋到页面上
        if (res.success) {
          this.billsForm.receiptNumber = res.data.filedCode;
          this.billsForm.sendRepairDate = this.timestampToDatetime(
            new Date().getTime()
          );
        }
      });
    },
  },
};
</script>

<style lang='less'>
.fix-online-form {
  .poros-form-item-label {
    width: 78px !important;
  }
}
</style>
